<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="./stylesheets/style.css">
    <!-- Angular-->
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.min.js"></script>
    <title>Snack Bar</title>
    <style type="text/css">
        ul{list-style:none;}
    </style>
</head>
<body ng-controller="myCtrl">

<div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/" ng-click = "getAll();">Snack Bar</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li><a href="/" ng-click = "getAll();">首页</a></li>
                <li class="active"><a href="/messages">留言</a></li>
                <li><a href="/tallybook">欠账本</a></li>
                <li><a href="/contact">关于</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
</div>

<div class="snackcontainer">

<div class="messageform col-md-12">
    <form class="form-inline">
      <div class="form-group">
        <textarea type="text" rows="3" cols="60" class="form-control" id="message" ng-model="message" placeholder="你还想吃什么？(最多能输60个字)" maxlength="60"></textarea>
      </div>
      <span ng-class="{true:'alert alert-danger',false:'alert alert-success'}[isFail]" ng-show="isFail" role="alert">留言不能为空!</span>
    </form>
     <button type="submit" class="btn btn-primary btn-post" ng-click="postMessage();">发布</button>
</div>

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-12">
    <ul>
        <li ng-repeat="i in messageList|orderBy:order">
            <strong>
              <p>
                  {{i.author}}
              </p>
            </strong>
              <div class="col-md-9">
                  {{i.message}}
              </div>
              <div class="col-md-3"> 
                    {{i.date|date:'yyyy-MM-dd HH:mm:ss'}} 
              </div>
            
            <hr/>
        </li>
      
    </ul>
  </div>
</div>
</div>

<script>
    var app=angular.module("app",[], function () {
        console.log('started to get message');
    });
    app.controller("myCtrl",function($scope,$http){
      
      $http.get("/message/messages").success(function(response){
        $scope.messageList = response;
        $scope.order = "-date";
      });

      $http.get("/session").success(function(response){
      if(response&&response.user) {
        $scope.username = response.user.name;
        if (response.user.type=="Admin") {
          $scope.isAdmin = true;
        }
        $scope.showLogout = true;
        $scope.showLogin = false;
      } else {
        $scope.showLogin = true;
      }
    });

      $scope.postMessage = function(){
        if (!$scope.username||!$scope.message) {
          $scope.isFail = true;
          return;
        }
        $http({
              method  : 'post',
              url     : '/message/messages',
              data    : {
                author : $scope.username,
                message : $scope.message,
                date : Date.parse(new Date())
              }
          })
            .success(function(data) {
              $scope.isFail = false;
                // if successful, bind success message to message
               // $scope.message = data.message;
                $http.get("/message/messages").success(function(response){
                  $scope.messageList = response;
                  $scope.order = "-date";
                });
                $scope.message = "";
            })
      };

});
</script>

<!-- FOOTER -->

<footer class="footer">
  <p class="pull-right"><a href="#"><img src="./images/goTop.jpg"/></a></p>
  <p>&copy; 2015 Company, Inc. &middot; Powered By &middot; <a href="https://nodejs.org/">Nodejs</a></p>
</footer>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>